<style lang='scss' scoped>
@import '@/assets/css/index';
.game5 {
	@include page();
	.wrapper{
		display: flex;
      flex-direction: column;
      flex:1;
		.contentBox{
			@include contentBox();
      .heng{
        position: absolute;
         width: 14rem !important;
         height: 8rem !important;
         bottom: 10%;
         left: 6rem;
          opacity : 0;
      }
      .dengshi{
        position: absolute;
				width: 30rem !important;
				height: 6rem !important;
      }
		}
	}
}

</style>
<template>
  <div class="game5" ref="game">
		<div class="wrapper">
			<myheader :passInfo="passInfo"></myheader>
			<div class="contentBox" ref="contentBox" @click="clickContentBox">
        <img class="dengshi" ref="dengshi" :style="{left: marginLeft + 'px', top: marginTop + 'px'}"
					src="../../../assets/img/g5/01.png">
        <img class="heng" ref="heng"
					@touchstart.prevent="touchstartHandle('heng',$event)"   
					@touchmove.prevent="touchmoveHandle('heng',$event)"
					src="../../../assets/img/g5/02.png">
			</div>
		</div>
  </div>
</template>

<script>
import myheader from './header2.vue'
import {mapState} from 'vuex'
export default {
  name: 'game5',
  components: {
		myheader
  },
  data() {
    return {
      hearNum: '',
      showText:true,
      coordinate: {
        client:{},
        elePosition: {},
        targetScope: {},
      },
      passInfo:'',
      marginLeft: 10,
      marginTop: 10,
    }
  },
  created () {
    this.$store.commit("setIsPass",false)
    //在页面链接中获取到当前是第几关
    const ji = this.$route.query.ji
    this.passInfo = {
      ji:ji,
      text: '来个简单点的吧！让等式成立',
      tip: '将前面1下面的一横移到问号下面'
    }
    document.title = `第${ji}关`
  },
  computed: {
    ...mapState(['fivepass'])
  },
  mounted() {
    // contentBox 的clientY
    const contentBox = this.$refs["contentBox"]
    console.log("contentBox.clientHeight",contentBox.clientHeight)

    const element = this.$refs["dengshi"]
    // master_pic 宽高
    const width = element.clientWidth
    const height = element.clientHeight
    console.log(width,height)
    // 屏幕宽度
    const screenWidth = window.screen.width
    const contentHeight = contentBox.clientHeight
    console.log('screenWidth',screenWidth)
    const marginLeft = (screenWidth - width)/2
    console.log('marginLeft',marginLeft)
    const marginTop = (contentHeight - height)/2
    // 实现水平居中
    this.marginLeft = marginLeft
    // 实现垂直居中
    this.marginTop = marginTop

    //可移动元素归位


    // const element = this.$refs["waterTarget"]
	  // console.log(this.$refs["waterTarget"].getBoundingClientRect().width)
	  // this.coordinate.targetScope.x = [element.offsetLeft,element.offsetLeft + element.getBoundingClientRect().width]
	  // this.coordinate.targetScope.y = [element.offsetTop + contentBox.offsetTop,element.offsetTop + contentBox.offsetTop + element.getBoundingClientRect().height]
	  // console.log("this.coordinate.targetScope",this.coordinate.targetScope)
  },
  methods: {
    clickContentBox(e) {
      console.log(e.layerX,e.layerY)
    },
    touchstartHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 记录点击的坐标
		  this.coordinate.client = {
			  x: element.clientX,
			  y: element.clientY
		  }
		  // 记录需要移动的元素坐标
		  this.coordinate.elePosition.left = this.$refs[refName].offsetLeft
		  this.coordinate.elePosition.top = this.$refs[refName].offsetTop
	  },
    touchmoveHandle(refName, e) {
			// 阻止事件冒泡到DOM树上
    	e.stopPropagation();
		  let element = e.targetTouches[0]
		  // 根据初始 client 位置计算移动距离(元素移动位置=元素初始位置+光标移动后的位置-光标点击时的初始位置)
		  let x = this.coordinate.elePosition.left + (element.clientX - this.coordinate.client.x)
		  let y = this.coordinate.elePosition.top + (element.clientY - this.coordinate.client.y)
		  // 限制可移动距离，不超出可视区域
		  x = x <= 0 ? 0 : x >= innerWidth - this.$refs[refName].offsetWidth ? innerWidth - this.$refs[refName].offsetWidth : x
		  y = y <= 0 ? 0 : y >= innerHeight - this.$refs[refName].offsetHeight ? innerHeight - this.$refs[refName].offsetHeight : y
		  // 移动当前元素
		  this.$refs[refName].style.left = x + 'px'
		  this.$refs[refName].style.top = y + 'px'
      this.ok(e)
	  },
	  ok(e) {
      if(e.target.className=='water'){
        let element = e.changedTouches[0]
        if(element.clientX>=this.coordinate.targetScope.x[0]&&element.clientX<=this.coordinate.targetScope.x[1]){
          if(element.clientY>=this.coordinate.targetScope.y[0]&&element.clientY<=this.coordinate.targetScope.y[1]){
            // 通过关卡
            this.$store.commit("setIsPass",true)
            console.log("isPass",this.$store.state.isPass)
          }  
        }
      }
	  },
	}
}
</script>
